<template>
  <div class="box">
    儿子1的文具： {{ toy }}
    <p style="margin-top: 10px;" v-show="gift">弟弟赠送的礼物： {{ gift }}</p>
  </div>

</template>

<script lang='ts' setup>
import { onUnmounted, ref } from 'vue';
import emitter from '@utils/emitter';

const toy = ref("奥特曼");
const gift = ref("");

emitter.on("change-toy", (toyName: any) => {
  gift.value = toyName;
})

onUnmounted(() => {
  emitter.off("change-toy");
});
</script>

<style scoped lang='scss'>
.box {
  border: 1px solid #ccc;
  padding: 10px;
  background-color: orange;
  color: white;
  margin-top: 20px;
  min-height: 120px;
}
</style>
